<template>
  <div class="m-products-list">
    <dl>
      <dd
        v-for="(item, idx) in nav"
        :key="idx"
        :class="[item.name, item.acitve ? 's-nav-active' : '']"
        @click="navSelect"
      >
        {{ item.txt }}
      </dd>
    </dl>
    <ul>
      <el-row>
        <el-col
          :span="5"
          v-for="(item, idx) in plist"
          :key="idx"
          :offset="idx > 0 ? 1 : 0"
          :style="idx % 4 === 0 ? 'margin-left: 0' : 'margin-left: 4.16667%'"
        >
          <Item  :key="idx" :meta="item" />
        </el-col>
      </el-row>
    </ul>
  </div>
</template>

<script>
// import Item from './product.vue'
import Item from "./aproduct.vue";
export default {
  components: {
    Item
  },
  props: {
    plist: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      nav: [
        {
          name: "s-default",
          txt: "智能排序",
          acitve: true
        },
        {
          name: "s-price",
          txt: "价格最低",
          active: false
        },
        {
          name: "s-visit",
          txt: "人气最高",
          active: false
        },
        {
          name: "s-comment",
          txt: "评价最高",
          active: false
        }
      ]
    };
  },
  async asyncData({ app }) {
    let { data } = await app.$axios.get("searchList");
    return { items: data.list };
  },
  methods: {
    navSelect: function() {
      console.log("select");
    }
  }
};
</script>
